<template>
    <view class="u-page">
        <view class="u-demo-block">
            <text class="u-demo-block__title">基础演示</text>
            <view class="u-demo-block__content">
                <u-tabs :list="list1" @click="click">
                </u-tabs>
            </view>
        </view>
        <view
                class="u-demo-block"
                style="margin-bottom: 0;"
        >
            <text class="u-demo-block__title">粘性布局</text>
        </view>
        <u-sticky bgColor="#fff">
            <u-tabs
                    :list="list1"
                    sticky
            >
            </u-tabs>
        </u-sticky>
        <u-gap
                height="23"
                bgColor="#fff"
        ></u-gap>
        <view class="u-demo-block">
            <text class="u-demo-block__title">显示徽标</text>
            <view class="u-demo-block__content">
                <u-tabs :list="list2">
                </u-tabs>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">禁止滚动</text>
            <view class="u-demo-block__content">
                <u-tabs :list="list6" :scrollable="false">
                </u-tabs>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">禁用菜单</text>
            <view class="u-demo-block__content">
                <u-tabs :list="list3">
                </u-tabs>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">自定义样式</text>
            <view class="u-demo-block__content">
                <u-tabs
                        :list="list4"
                        lineWidth="30"
                        lineColor="#f56c6c"
                        :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
                        :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
                        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
                >
                </u-tabs>
            </view>
        </view>
        <view class="u-demo-block">
            <text class="u-demo-block__title">右侧自定义插槽</text>
            <view class="u-demo-block__content">
                <u-tabs :list="list1">
                    <view
                            slot="right"
                            style="padding-left: 4px;"
                            @tap="$u.toast('插槽被点击')"
                    >
                        <u-icon
                                name="list"
                                size="21"
                                bold
                        ></u-icon>
                    </view>
                </u-tabs>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        // mixins: [uni.$u.mixin],
        data() {
            return {
                list1: [{
                    name: '关注',
                }, {
                    name: '推荐',
                }, {
                    name: '电影'
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
                list2: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                    badge: {
                        value: 5,
                    }
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
                list3: [{
                    name: '关注'
                }, {
                    name: '推荐',
                }, {
                    name: '电影',
                    disabled: true
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
                list4: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
                list6: [
                    {
                        name: '关注'
                    }, {
                        name: '推荐',
                    }, {
                        name: '电影',
                    }, {
                        name: '科技'
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            click(item) {
                console.log('item', item);
            }
        }
    }
</script>

<style lang="scss">
    .u-page {
        padding-bottom: 500px;
    }
</style>

